<template>
  <div id="MyMember">
        <div>
            <div class="div1">
                <el-row>
                    <p class="myMember_p1">{{this.text}}</p>
                    <p class="myMember_p4" @click="Pay">支付记录</p>
                </el-row>
                <el-row>
                    <el-col :span="16" v-for="item in cardList" :key="item.id" class="col111">
                        <el-col :span="5">
                            <img :src="'http://127.0.0.1:8082/getImageById?id=' + item.cardEntity.coverId " class="MyMemeber_img1"/>
                        </el-col>
                        <p class="myMember_p2">{{item.cardName}}</p>
                        <p class="myMember_p2">{{item.expirationTime|formatDate('yyyy-MM-dd HH:mm:ss')}}到期</p>
                        <p class="myMember_p3" @click="checkDetails(item.cardId)">查看明细></p>
                    </el-col>
                </el-row>
            </div>    
        </div>
  </div>
</template>

<script>
const axios = require('axios');
export default {
    name: 'MyMember',
    data(){
        return{
            //接收前页面的用户id
            userId:'',
            //存放会员卡id
            cardId:'',
            //用户拥有会员卡种类
            userCardList:[], 
            //用户购买会员卡记录
            cardList:[], 
            //获取会员卡图片id
            cardImage:[],
            //欢迎语句
            text:'',
        }
    },
    methods:{
        //查看所有购买记录
        Pay(){
            this.$router.push({name:'PayCards', query:{id: this.userId}})
        },
        //查看某个会员卡购买记录
        checkDetails(cardId){
            this.$router.push({name:'CheckCardDetail', query:{id: cardId}})
        },
        //查询用户拥有会员卡类型
        getUserCard(){
            this.userId = this.$route.query.id
            axios.get('http://127.0.0.1:8082/cardRecord/getUserCard?userId=' + this.userId).then(res=>{
                this.userCardList = res.data.obj
                if(this.userCardList.length>0){
                    this.text = "我开通的服务"
                }
                else{
                    this.text = "您未开通会员服务"
                }
                this.getCardExpiration()
            }).catch(error => {
                this.$message.error('查询用户拥有会员卡类型失败！');
            })
        },
        //查询用户会员卡过期时间
        getCardExpiration(){
            this.userCardList.forEach((item)=>{
                this.cardId = item.cardId
                //查询过期时间
                axios.get('http://127.0.0.1:8082/cardRecord/getCardExpiration?cardId=' + this.cardId +"&userId=" + this.userId).then(res=>{
                    this.cardList.push(res.data.obj)
                }).catch(error => {
                    this.$message.error('查询用户会员卡过期时间失败！');
                })
            })
           
        },
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            });
        },
    },
    mounted(){
        this.getUserCard()
    },
    //格式化时间
    filters:{
        formatDate: function(value,args) {
            var dt = new Date(value);
            if(args == 'yyyy-M-d') {// yyyy-M-d
            let year = dt.getFullYear();
            let month = dt.getMonth() + 1;
            let date = dt.getDate();
            return `${year}-${month}-${date}`;
        } else if(args == 'yyyy-M-d H:m:s'){// yyyy-M-d H:m:s
            let year = dt.getFullYear();
            let month = dt.getMonth() + 1;
            let date = dt.getDate();
            let hour = dt.getHours();
            let minute = dt.getMinutes();
            let second = dt.getSeconds();
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        } else if(args == 'yyyy-MM-dd') {// yyyy-MM-dd
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            return `${year}-${month}-${date}`;
        } else {// yyyy-MM-dd HH:mm:ss
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            let hour = dt.getHours().toString().padStart(2,'0');
            let minute = dt.getMinutes().toString().padStart(2,'0');
            let second = dt.getSeconds().toString().padStart(2,'0');
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        }
        }
    }

}
</script>

<style scoped>
.col111{
    margin-top:80px;
    border-radius:2.7%;
    background-image: url("../../img/jui.jpg");
}
.myMember_div1{
    margin:0 auto;
    width:1200px;
    height:800px;
    margin-top:30px;
}
.myMember_p1{
    font-weight: bold;
    font-size:20px;
    float:left;
}
.MyMemeber_img1{
    width:122px;
    height:118px;
    border-radius: 100%;
    float: left;
}
.myMember_p2{
    width:240px;
    font-weight: bold;
    font-size:20px;
    float: left;
    color:white;
    margin-top:40px;
}
.myMember_p3{
    font-size:16px;
    float: left;
    color:white;
    margin-top:40px;
    margin-left:40px;
}
.myMember_p3:hover{
    cursor:pointer;
    color:blue;
}
.myMember_p4{
    font-weight: bold;
    font-size:16px;
    float:right;
}
.myMember_p4:hover{
    cursor:pointer;
    color:rgb(96, 96, 235);
    border-bottom: 1px solid rgb(96, 96, 235);
}
</style>